<template>
  <div class="DynamicHomePage">
    <div class="HIS">
      <div class="DynamicHead">
        <div class="left iconfont icon-geren" @click="personal"></div>
        <div class="center">动态</div>
        <div class="right iconfont icon-fenxiang" @click="add"></div>
      </div>
    </div>
    <div class="Goodfriend">
      <div class="Goodfrienddiv">
        <div class="iconfont icon-tianjiahaoyou"></div>
        <p>发现好友</p>
      </div>
      <div class="Goodfrienddiv">
        <div :style="'background-image: url('+follow[0].avatarUrl+')'"></div>
        <p>{{ follow[0].nickname }}</p>
      </div>
      <div class="Goodfrienddiv">
        <div class="iconfont icon-danse_gongnengjihe"></div>
        <p>全部好友</p>
      </div>
    </div>
    <van-tabs v-model="activeName">
      <van-tab title="全部" name="a">
        <div class="Comment-content">
          <div
            v-for="(item, index) in CommentMusic"
            :key="index"
            class="CommentMusic"
          >
            <div
              class="backgroundImage"
              :style="'background-image: url(' + item.sharePicUrl + ')'"
            ></div>
            <div class="nickname">
              <h1>{{ item.title }}</h1>
            </div>
            <div class="content">
              <p v-for="(k, i) in item.text" :key="i">{{ k }}</p>
              <p>热爱生活</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="音乐人" name="b">
        <div class="icondiepian">
          <span class="iconfont icon-diepian"></span>近三个月无新歌发布
        </div>
        <div class="iconxiangzi">
          <div class="iconfont icon-xiangzi"></div>
          <p>关注的音乐人近30天没有新动态</p>
        </div>
      </van-tab>
      <van-tab title="朋友" name="c">
        <div class="icondiepian">
          <span class="iconfont icon-diepian"></span>近三个月无新动态
        </div>
        <div class="iconxiangzi">
          <div class="iconfont icon-xiangzi"></div>
          <p>关注的好友近30天没有新动态</p>
        </div>
      </van-tab>
    </van-tabs>
    <div></div>
    <div class="bottom">
      <van-tabbar active-color="#ee0a24" inactive-color="#ccc" v-model="active">
        <van-tabbar-item
          class="iconfont icon-wangyiyunyinle1-copy"
          @click="recommend"
          >首页</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-huatong" @click="singers"
          >歌手</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-peoples" @click="podcast"
          >关注</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-paihang" @click="ranking"
          >榜单</van-tabbar-item
        >
        <van-tabbar-item
          class="iconfont icon-shejiao-yinle-copy"
          @click="$router.push('/userInfo').catch(() => {})"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { getHotTopid,getUserFollows } from "../api/recommend";
export default {
  data() {
    return {
      active: 2,
      activeName: "a",
      CommentMusic: null,
      follow:null,
    };
  },
  methods: {
    personal() {
      this.$router.push("/userinfo");
    },
    add() {
      this.search = true;
    },
    recommend() {
      this.$router.push("/recommend");
    },
    singers() {
      this.$router.push("/singer");
    },
    ranking() {
      this.$router.push("/ranking");
    },
    podcast() {
      this.$router.push("/podcast");
    },
    getHotTopidFun() {
      getHotTopid().then((data) => {
        this.CommentMusic = data.hot;
        console.log(data);
      });
    },
  },
  created() {
    this.getHotTopidFun();
    getUserFollows({ uid: window.localStorage.uid }).then((data) => {
      this.follow = data.follow;
    });
  },
};
</script>
<style lang="less">
.DynamicHomePage {
  h1 {
    padding: 0;
  }
  .HIS {
    width: 100%;
    text-align: center;
    height: 39px;
    line-height: 39px;
    background-color: #d44439;
    .DynamicHead {
      width: 100%;
      position: fixed;
      top: 0px;
      color: #fff;
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      .left,
      .right {
        flex: 0 0 60px;
        font-size: 18px;
      }
      .left {
        font-size: 25px;
      }
      .center {
        flex: 1;
      }
    }
  }
  .Goodfriend {
    width: 96%;
    margin: 3% auto;
    display: flex;
    .Goodfrienddiv {
      width: 20%;
      text-align: center;
      div {
        width: 60px;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        border-radius: 50%;
        font-size: 35px;
        color: white;
        background-color: #e5e2e2;
        background-size: 100%
        ;
      }
      p {
        font-size: 12px;
        color: #b0b0b0;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 30px;
    position: fixed;
    padding: 5px 0;
    left: 0px;
    bottom: 0px;
    z-index: 10;
    background-color: white;
  }
  .icondiepian {
    width: 80%;
    text-align: center;
    margin: 3% auto;
    border: 1px solid #a3a3a3;
    border-radius: 10px;
    line-height: 30px;
    padding: 10px;
    span {
      font-size: 30px;
      padding: 0px 10px;
      color: #a3a3a3;
    }
  }
  .iconxiangzi {
    text-align: center;
    div {
      font-size: 100px;
      margin: 5%;
      color: #a3a3a3;
    }
  }
  .Comment-content {
    width: 100%;
    padding-bottom: 8%;
    .CommentMusic {
      margin-top: 10px;
      width: 95%;
      padding-left: 3%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .backgroundImage {
        width: 38px;
        height: 38px;
        background-size: 100%;
        border-radius: 50%;
        margin-right: 2%;
      }
      .nickname {
        flex: 1;
        color: #838383;
        h1 {
          padding: 0;
        }
      }
      h1 {
        font-size: 14px;
      }
      h2 {
        font-size: 8px;
      }
      .give-the-thumbs-up {
        position: relative;
        padding-right: 5%;
        line-height: 12px;
        font-size: 12px;
        color: #838383;
        span {
          position: absolute;
          right: -2%;
          color: #838383;
        }
        .iconfontred {
          color: red;
        }
      }
      .content {
        margin-top: 1%;
        width: 88%;
        margin-left: 12%;
        font-size: 14px;
        border-bottom: 1px solid #838383;
        padding-bottom: 2%;
      }
    }
  }
}
</style>